<template>
	<view class="content">
		<view>
			<view class=" loan_container">
				<view class="clear border_bottom" style="padding: 20px 0px;">
					<view class="money-icon left black_font" style="font-size: 36px!important;width: 40px;">
						￥
					</view>
					<view class="left loan_input">
						<input type="number" style="font-size: 20px;color: #666666;"  placeholder="请输入金额" v-model="capital" placeholder-style="font-size:20px;color:#ccc"/>
					</view>
				</view>
			</view>
			<view class="mokuai" style="margin: 20rpx;padding: 5px 12px;">
				<view class="info_title" style="font-size: 34rpx;">
					还款明细
				</view>	
				<view class="clear shenhe-text">
					<text class="left">应还利息 </text>
					<text class="right">{{info.investment}}</text>
				</view>
				<view class="clear shenhe-text">
					<text class="left">应还总额 </text>
					<text class="right" >{{info.elsecapital}}</text>
				</view><view class="clear shenhe-text">
					<text class="left">还款利率 </text>
					<text class="right">{{info.app_rate}}%</text>
				</view>
				
			</view>
			<view style="height: 200rpx;"></view>
			
			<button class="big_button button_shadow" style="margin: 30rpx auto;" @tap="showback()">
				确认还款
			</button>
			<!-- 确认支付 -->
			<view class="pay" v-show="pay">
			    <view class="paycon">
			        <view class="phead">
			            <text @tap="payg">X</text>
			            <text>在线付款</text>
			        </view>
			        <view class="payPrice">
			            <view class="payPriceTop">
			                ￥{{capital}}
			            </view>
			            <!-- <view class="payPriceBottom">
			                （含6元配送费用）
			            </view> -->
			        </view>
			        <view class="pay-list">
			            <view class="row" @tap="pay_type_change('wxpay')">
			                    <view class="left">
			                        <image src="/static/img/wxpay.png" style="width: 25px;height: 25px;"></image>
			                    </view>
			                    <view class="center">
			                        微信支付
			                    </view>
			                    <view class="right">
			                        <radio :checked="paytype=='wxpay'" color="#1e99ff"  style="transform: scale(0.7);"/>
			                    </view>
			            </view>
			            <view class="row" @tap="pay_type_change('alipay')">
			                    <view class="left">
			                        <image src="/static/img/apliy.png" style="width: 25px;height: 25px;"></image>
			                    </view>
			                    <view class="center">
			                        支付宝支付
			                    </view>
			                    <view class="right">
			                        <radio :checked="paytype=='alipay'" color="#1e99ff" style="transform: scale(0.7);"/>
			                    </view>
			            </view>
			        </view>
			        <!-- 确认支付 -->
			        <button class="big_button " style="margin: 100rpx auto;" @tap="addorder()">
			        	确认还款
			        </button>
			    </view>
			</view>
		</view>
	</view>
</template>

<script>
	import httpPath from '@/static/js/path.js';
		import {getlogin} from '@/static/js/login.js';
		import {timestampToDate} from '@/static/js/login.js';
		import {timestampToDate1} from '@/static/js/login.js';
		import {fmoney} from '@/static/js/login.js';
		
		export default {
			
			data() {
				return {
					pay:false,//控制确认支付页面
					current:0,
					info:{},
				    is_check:"",
					headpic:"",
					paytype:"",
					capital:"",
					order_id:"",
					
				}
			},
			onLoad(option) {
				this.user = getlogin();
				if(!this.user.islogin){
					uni.showModal({
					   showCancel:false,
					   content:"您还没有登录，请登录"
					})
					uni.navigateTo({
						url:"../public/login"
					})
				}
				if(option.id){
					this.id=option.id;
					this.getinfo();
				}else{
					uni.navigateBack()
				}
			},
			methods: {
				pay_type_change(type){
					this.paytype=type;
				},
				payg(){
					this.pay=false;
				},
				showback(){
					if(this.capital==null||this.capital==""){
						uni.showModal({
							showCancel:false,
							content:"请输入金额"
						})
						return false;
						
					}else if(this.capital<0||this.capital>parseFloat(this.info.elsecapital1)){
						console.log(this.info.elsecapital)
						uni.showModal({
							showCancel:false,
							content:"还款金额应该小于应还金额"
						})
						return false;
					}
					uni.request({
					    url: httpPath.filePath+"/api.php/index/member/pay_capital",
					    method:'POST',
					    header:{'content-type':'application/x-www-form-urlencoded'},
					    data:{member_id:this.user.member_id,id:this.id,price:this.capital} ,
					    success: (res) => {
							if(res.data.code=="200"){
								this.order_id=res.data.result.id;
								this.price=res.data.result.price
								this.pay=true;
							}
							
					    }
					});
					
				},
				getinfo(){
					let url=""
					if(this.user.type==1){
						url="api.php/index/member/getLoanDetail/"
					}else{
						url=""
					}
					uni.request({
					    url: httpPath.filePath+url,
					    method:'POST',
					    header:{'content-type':'application/x-www-form-urlencoded'},
					    data:{member_id:this.user.member_id,id:this.id} ,
					    success: (res) => {
							if(res.data.code=="200"){
								this.info=res.data.result;
								this.info.tongguo=timestampToDate1(res.data.result.checktime3)
								this.info.capital=fmoney(this.info.capital)
								this.info.elsecapital1=this.info.elsecapital
								this.info.elsecapital=fmoney(this.info.elsecapital)
								this.info.investment=fmoney(this.info.investment)
								this.info.paymoney=fmoney(this.info.paymoney)
								this.info.addtime=timestampToDate(this.info.addtime)
								this.info.checktime3=timestampToDate(this.info.checktime3)
								
								this.info.endtime=timestampToDate1(this.info.endtime)
								
							}
							
					    }
					});
				},addorder(){
					if(this.paytype==""){
						uni.showModal({
							showCancel:false,
							content:"请选择支付方式"
						})
						return false;
					}
					uni.request({
					    url: httpPath.filePath+"api.php/index/pay/order_pay/",
					    method:'POST',
					    header:{'content-type':'application/x-www-form-urlencoded'},
					    data:{id:this.order_id,price:this.capital,paytype:this.paytype} ,
					    success: (res) => {
							// uni.showModal({
							// 	content:JSON.stringify(res)
							// })
							if(res.data.code=="200"){
								uni.requestPayment({
								    provider: this.paytype,
								    orderInfo:res.data.result,
								    success: (e) => {
								        uni.showToast({
								           title:'支付成功',
								           icon:'none'
								        });
										uni.navigateBack({
										     delta:2
										   }
										)
								    },
								    fail: (e) => {
										// uni.showModal({
										// 	content:JSON.stringify(e)
										// })
								        uni.showToast({
								           title:"支付失败" ,
								           icon:'none'
								        });
										
								    }
								})
							}
							
					    }
					});
				}
		       
			 
			}
		}
	</script>
	
</script>

<style lang="scss">
	@import "../../colorui/main.css";
	.loan_container{width: 100%;background: #FFFFFF;padding: 30rpx 20rpx;margin-bottom: 15rpx;}
	.money-icon{width: 50rpx;line-height: 80rpx;}
	.loan_input{width: 80%;}
	.loan_input input{height: 80rpx;}
	.miaoshu{margin-top:30rpx;}
	.loan_container .border_bottom{padding: 20rpx 0px;}
	.hetong-back{background: #FFFFFF;padding: 10rpx 20rpx 30rpx;}
	.hetong-back .line_title{color: #323232;}
	.pay,.cancel {
	    position: fixed;
	    top: 0;
	    width: 100%;
	    height: 100%;
	    z-index:100;
	    background-color: rgba($color: #000000, $alpha: 0.5);
	    .paycon,.close {
	        position: absolute;
	        bottom: 0;
	        width: 100%;
	        background-color: #fff;
	        border-radius: 10upx 10upx 0 0;
	        .phead {
	            position: relative;
	            padding: 20upx 4%;
	            border-bottom: 2upx solid #f1f1f1;
	            text:first-of-type {
	                position: absolute;
	                top: 20upx;
	                right:30upx;
	                width: 45upx;
	                height: 45upx;
	                line-height: 45upx;
	                color: #333333;
	                font-size: 34upx;
	                border:2upx solid #333;
	                border-radius: 50%;
	                text-align:center;
	            }
	            text:last-of-type {
	                display: block;
	                width: 100%;
	                text-align: center;
	                color: #333;
	                font-size: 34upx;
	            }
	        }
	        .payPrice{
	            width: 100%;
	            padding: 30upx 0;
	            text-align: center;
	            .payPriceTop {
	                color:#333;
	                font-size: 45upx;
	                font-weight: 700;
	            }
	            .payPriceBottom {
	                color:#4577f7;
	                font-size: 32upx;
	            }
	            
	        }
	        .pay-list{
	        	width: 100%;
	            box-sizing: border-box;
	            padding: 0 4%;
	        	// border-bottom: solid 1upx #eee;
	        	.row{
	        		width: 100%;
	        		height: 95upx;
	        		display: flex;
	        		align-items: center;
	                border-bottom: solid 1upx #eee;
	        		.left{
	        			width: 100upx;
	        			flex-shrink: 0;
	        			display: flex;
	        			align-items: center;
	        			image{
	        				width: 72upx;
	        				height: 72upx;
	        			}
	        		}
	        		.center{
	        			width: 100%;
	        			font-size: 34upx;
	        		}
	        		.right{
	        			width: 100upx;
	        			flex-shrink: 0;
	        			display: flex;
	        			justify-content: flex-end;
	        		}
	        	}
	        }
	    }
	    .close {
	        width: 90%;
	        left: 0;
	        right: 0;
	        bottom:40%;
	        margin: auto;
	        border-radius: 15upx;
	        .phead {
	            border-bottom: none;
	        }
	        .because {
	            padding: 0 4%;
	        }
	    }
	}
	.info_title{padding-bottom: 6px;margin-bottom: 6px;}
</style>
